<script setup lang="ts">
import {reactive, onMounted, nextTick, defineAsyncComponent, ref} from 'vue';
import {getInitDataApi} from '/@/api/api'
import { useRouter } from 'vue-router';
import {ElMessage, ElMessageBox} from "element-plus";
const editSetting = defineAsyncComponent(() => import('../components/editSetting.vue'));
const router = useRouter()
const editSettingRef = ref();
const action = import.meta.env.VITE_API_URL + '/util/file/oss/single'
const data = reactive({
  show:false,
  userId: '',
  tabIndex: 0,
  dataList: [],
  page: {
    total: 10,
    currentPage: 1,
    pageSize: 10,
  },
  //教师列表配置
  option: {
    index: true,
    // searchLabelWidth: 65,
    addBtn: false,
    printBtn: false,
    excelBtn: false,
    // searchSpan: 5,
    searchMenuSpan: 6,
    border: true,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    align: 'center',
    // emptyBtnText: '重置',
    emptyBtnIcon: 'el-icon-close',
    column: [
      {
        label: 'key',
        prop: 'initKey',
      },
      {
        label: 'Name',
        prop: 'initName',
      },
      {
        label: 'Value',
        prop: 'initValue',
      },
    ]
  },
  form: {}
})
onMounted(() => {
  CourseListPage()
})
const CourseListPage = (item:object = {}) => {
  let page = {
    pageIndex: data.page.currentPage,
    pageSize: data.page.pageSize,
  }
  getInitDataApi(page).then((res:any) => {
    if (res.code === 200) {
      data.dataList = res.data.list
      data.page.total = res.data.total
    }
  })
}
const onLoad = (e:any) => {
  console.log(e)
  data.page.currentPage = e.currentPage
  data.page.pageSize = e.pageSize
  CourseListPage()
}
const toViewEditAdd = (val: object) => {
  
}
const refreshChange = (index: number) => {
  CourseListPage()
}
const initData = () => {
  CourseListPage()
}
const handleEdit = (row?: any) => {
  editSettingRef.value.init(row);
}
</script>


<template>
  <div class="layout-pd">
    <div class="carousel-box">
      <avue-crud v-model:page="data.page" :data="data.dataList" :option="data.option" @on-load="onLoad" @refresh-change="refreshChange">
        <template #initValue="{row}">
          <div style="max-height: 100px;width: 100%">{{ row.initValue }}</div>
        </template>
        <template #menu="{row}">
          <el-button text type="primary" @click="handleEdit(row)">Edit</el-button>
        </template>
      </avue-crud>
    </div>
    <editSetting ref="editSettingRef" @callback="initData()"></editSetting>
  </div>
</template>

<style scoped lang="scss">
.carousel-box {
  width: 100%;
  box-sizing: border-box;
  background: var(--el-color-white);
  padding: 20px;
}
.item-img {
  width: 100%;
  img {
    width: 80px;
  }
}
::v-deep .avue-form__row {
  margin-bottom: 20px;
}
</style>